<template>
  <div class="home">
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item
      v-for="banner in banners"
      :key="`banner-${banner.id}`"
    >
      <img :src="banner.imageUrl" :alt="banner.text">
    </van-swipe-item>
  </van-swipe>
    <div class="shopItem" >
      <van-grid :column-num="5">
        <van-grid-item
          v-for="shop in list"
          :key="`shopitem-${shop.id}`"
          :icon="shop.imageUrl"
          :text="shop.name"
          to= '/Mall'
        />
    </van-grid>
    </div>
    <div class="homeshopitem">
      <shopCart
        v-for="shop in shoplist"
        :key="`shoplist-${shop.id}`"
        :image="shop.image"
        :id="shop.id"
        :title="shop.title"
        :price="shop.price"
        :saleNum="shop.saleNum"
        :type="shop.type"
      />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src\
// import CartItem from '@/components/CartItem'
import shopCart from '@/components/shopCart'
export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      list: [],
      shoplist: []
    }
  },
  created () {
    // fetch('/api/tabs')
    //   .then(resp => resp.json())
    //   .then(resp => {
    //     console.log(resp)
    //   })
    this.$http.getCategory(1)
      .then(resp => {
        console.log(resp)
        this.banners = resp.banners
        this.shoplist = resp.items.list
        console.log(this.shoplist)
      })
    this.$http.getTabs().then(resp => {
      // console.log(resp)
      const { list } = resp
      this.list = list
      console.log(list.shift())
    })
  },
  methods: {
    innitBanner () {
    }
  },
  components: {
    shopCart
  }
}
</script>
<style lang="scss" scoped>
.homeshopitem{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .bannermain{
    width: 100%;
    padding-top: 378/1008 *100%;
    height: 0;
    position: relative;
    top: 0;
    left: 0;
    img{
      width: 100%;
    }
  }
</style>
